<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                    <Input v-model="value14" placeholder="区县" clearable style="width: 200px" />
                </Col>
                <Col span="4">
                    <Button type="primary" class="lyx-mr10">查询</Button>
                </Col>
            </Row>
        </div>

        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange">
                        <template   slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="modal1 = true">查看明细</Button>
                        </template>

                    </Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="100" show-total />
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="单位详情"  width="60">
            <div class="detail">
                <!--<Divider orientation="left">切换形式的页面</Divider>-->
                <Tabs value="name1">
                    <TabPane label="殡仪馆详情" name="name1">
                        <Table border ref="selection" :columns="columns5" :data="data2" @on-selection-change="tableSelectChange">
                        </Table>
                    </TabPane>
                    <TabPane label="火葬场详情" name="name2">标签二的内容</TabPane>
                    <TabPane label="公墓详情" name="name3">标签三的内容</TabPane>
                    <TabPane label="骨灰堂详情" name="name4">标签四的内容</TabPane>
                </Tabs>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      columns4: [
        {
          title: '区县',
          key: 'area'
        },
        {
          title: '总数',
          key: 'total'
        },
        {
          title: '殡仪馆数量',
          key: 'type1'
        },
        {
          title: '火葬场数量',
          key: 'type2'
        },
        {
          title: '公墓数量',
          key: 'type3'
        },
        {
          title: '骨灰堂数量',
          key: 'type4'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data1: [
        {
          area: '和平区',
          total: '8',
          type1: '3',
          type2: '2',
          type3: '2',
          type4: '1'
        },
        {
          area: '大东区',
          total: '11',
          type1: '1',
          type2: '5',
          type3: '3',
          type4: '2'
        },
        {
          area: '铁西区',
          total: '16',
          type1: '4',
          type2: '4',
          type3: '5',
          type4: '3'
        },
        {
          area: '皇姑区',
          total: '16',
          type1: '4',
          type2: '4',
          type3: '5',
          type4: '3'
        }, {
          area: '沈河区',
          total: '16',
          type1: '4',
          type2: '4',
          type3: '5',
          type4: '3'
        },
        {
          area: '沈北新区',
          total: '23',
          type1: '5',
          type2: '5',
          type3: '3',
          type4: '2'
        },
        {
          area: '于洪区',
          total: '14',
          type1: '4',
          type2: '3',
          type3: '5',
          type4: '3'
        }
      ],
      columns5: [
        {
          title: '序号',
          width: 60,
          key: 'area'
        },
        {
          title: '单位名称',
          key: 'total'
        },
        {
          title: '地址',
          key: 'type1'
        },
        {
          title: '电话',
          key: 'type2'
        }
      ],
      data2: [
        {
          area: '1',
          total: '浑南殡仪馆',
          type1: '孙家寨路99号',
          type2: '13112345678'
        },
        {
          area: '2',
          total: '东陵殡仪馆',
          type1: '泉园2路60号',
          type2: '13112345678'
        },
        {
          area: '3',
          total: '苏家屯天台山殡仪馆',
          type1: '辽宁省沈阳市苏家屯区河杨路附近',
          type2: '13112345678'
        }
      ],
      value14: '',
      modal1: false
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    show () {
      alert(1)
    },
    ok () {

    }
  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
